import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  { //兄弟组件传值
    path:"/bro",
    name:"bro",
    component:()=>import("../views/brothoer/index.vue"),
    // 路由独享的钩子函数beforeEnter 
    // 进入当前组件拦截
    beforeEnter(to,from,next){
      console.log(to,"88888888") //当前组件的路由信息
      console.log(from,"999999")//from 上一个页面的路由信息
        next();
    } 
  },
  { //$attrs 等
    path:"/cart",
    name:"cart",
    children:[],
    meta:{}, 
    alias:"xiaocart",//路由别名 也能跳转
    component:()=>import("../views/cart/index.vue")
  },
  {//组件守卫
    path:"/pay",
    name:"/pay",
    component:()=>import("../views/pay/index.vue")
  },
  { //provide和inject  vuex
    path:"/myvuex",
    name:"myvuex",
    component:()=>import("../views/myvuex/index.vue")
  }
]

const router = new VueRouter({
  mode: 'history', //mode 路由模式 
  // 路由模式 有俩种  hash模式 history历史模式
  // hash模式 在地址栏多一个#  历史模式无#
  // history历史的原理是基于 html5新增的 history.pushState()方法 来实现的跳转
  // hash模式的原理 是基于原生js的window.onhashchange事件 来切换组件
  // nginx 部署发生过什么问题|历史模式上线有什么问题
  // 上线的时候遇到过什么问题
  // 历史模式在上线时候，nginx服务器部署会发生404问题
  // 解决是在nginx配置 try_files重定向到主页 解决
  
  base: process.env.BASE_URL,
  // base:路由基本运行路由 process.env.BASE_URL获取当前运行的服务器地址  localhost:8080




  routes
})
  //  process.env.NODE_ENV 判断当前的运行环境
  // process.env.NODE_ENV  
  // 常见值 production 生产环境  development 开发环境
  //  test--测试环境
  console.log(process.env.NODE_ENV);
  // axios({
  //   BASE_URL:process.env.NODE_ENV=="production"?'http://www.baidu.com':'http:192.168.1.11';
  // })


export default router

